<template>
    <div class="allFood">
        <!-- 头部留住 -->
        <Header/> 
         <div class="dining">
            <div class="dining-box">
                <div class="bread1">
                    <div class="tags">
                        <span>推荐</span>
                    </div>
                    <ul class="list-ul">
                        <li class="btm" v-for="(dining,index) in things" :key="index">
                            <div class="img">
                                <router-link :to="`/cate/${dining.shopId}`">
                                    <div class="imgbox">
                                        <img :src="dining.shopCover" alt="">
                                    </div>
                                </router-link>
                            </div>
                            <div class="info">
                                <router-link :to="`/cate/${dining.shopId}`" class='info-a'>
                                    <h4>{{dining.shopName}}</h4>
                                    <div class="source">
                                        <p>分数<span>{{dining.shopMark}}</span></p>
                                    </div>
                                    <p class="desc">
                                        地址：{{dining.shopLocation}}
                                    </p>
                                    <p class="desc">
                                        电话：{{dining.shopPhone}}
                                    </p>
                                </router-link>
                                <div class="other">
                                    <router-link to="/cate?id=dining.shopId" class='other-food'>
                                        <div class="one">
                                            <h4>{{dining.name2}}</h4>
                                            <p>{{dining.price2}}</p>
                                        </div>
                                    </router-link>
                                    <router-link to="/cate" class='other-food'>
                                        <div class="one">
                                            <h4>{{dining.name3}}</h4>
                                            <p>{{dining.price3}}</p>
                                        </div>
                                    </router-link>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>  
</template>
<script>
    import Header from '../components/ld/header.vue'
    import cookie from '../cookie/index'
    let n
    export default {
        name:'Search',
        components:{Header},
        data(){
            return{
                things:null,               
            }
        },
        mounted(){
            this.showSearch()
        },
        beforeRouteEnter(to, from, next) {         
            if(to.query.content){
                next()
                n = to.query.content
            }else{           
                alert('请输入内容')               
            }
        },
        methods: {
            showSearch(){
                this.$http({
                url:'/shops/user/search/searchShop',
                method:'get',
                headers:{
                    'Authorization':cookie.getToken()
                } ,               
                params:{
                    information:n,
                    page:'1',
                    size:5
                }
            }).then(data => {
                this.things = data.data.data.date
            }).catch(err => {
                console.log(err);
            })
            }
        },
    }
</script>
<style lang="less" scoped>
    .dining{
        width: 100%;
       position: absolute;
       .dining-box{
           width: 1260px;
           margin: 0 auto;
           display: flex;
        // 左边
        .bread1{
            margin-left: 30px;
            width: 60%;
            // float: left;
            margin-top: 20px;
            padding: 15px 20px 21px 20px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #e5e5e5;
            color: #666;
            .tags{
                padding-bottom: 13px;
                font-size: 14px;
                line-height: 20px;
                border-bottom: 1px solid #e5e5e5;
               text-align: left;
            }
            .list-ul{
                list-style: none;
                display: flex;
                flex-direction: column;
                .btm{
                    position: relative;
                    border-bottom: 1px solid #e5e5e5 !important;
                    padding-bottom: 18px;
                    margin-top: 20px;
                    .img{ 
                        width: 220px;
                        height: 125px;
                        float: left;
                        border-radius: 4px;
                        position: relative;
                        overflow: hidden;
                        .imgbox{
                            width: 220px;
                            height: 125px;
                            img{
                                width: 100%;
                                height: 100%;
                                &:hover{
                                    cursor: pointer;
                                    transition: transform .5s ease-out;
                                    transform: scale(1.2);
                                    overflow: hidden;
                                } 
                            }
                        }
                    }
                    .info{
                        padding: 4px 0 0 20px;
                        font-size: 12px;
                        float: left;
                        width: 60%;
                        text-align: left;
                        .info-a{
                            text-decoration: none;
                            cursor: pointer;
                            color: #222;
                            h4{
                                font-size: 16px;
                                line-height: 22px;
                                color: #222;
                            }
                            .source{
                                padding: 6px 0 0 0;
                                height: 17px;
                                line-height: 13px;
                            }
                            .desc{
                                line-height: 17px;
                                color: #666;
                                padding-top: 7px;
                                margin-bottom: 11px;
                            }
                        }
                    }
                    .other{
                        border-top: 1px #e5e5e5 dashed;
                        padding: 16px 0 0 0;
                        .other-food{
                            text-decoration: none;
                            cursor: pointer;
                            color: #222;
                            .one{
                                padding-bottom: 18px;
                                h4{
                                    font-size: 14px;
                                    line-height: 14px;
                                    margin: 0 0 2px 0;
                                    font-weight: normal;
                                    color: #666;
                                    p{
                                        line-height: 21px;
                                        font-size: 12px;
                                        font-size: 15px;
                                        color: #ff6600;
                                        display: inline-block;
                                        margin-right: 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
       
    }
}
</style>